{extend name="addon/store/store/view/base.html"/}
{block name="resources"}
<style>
	.ns-screen{margin: 15px 0;}
	.member-info-wrap{display: flex;align-items: center;padding: 10px 0;}
	.member-face{width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}
	.member-face img{width: 100%;height: auto;max-width: 100%;max-height: 100%;}
	.member-nickname{margin-left: 10px;}
</style>
{/block}
{block name="main"}
<div class="ns-tips layui-collapse">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>当前显示的是购买过门店商品的会员</li>
		</ul>
	</div>
</div>

<!-- 筛选面板 -->
<div class="ns-screen layui-collapse" lay-filter="selection_panel">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title"></h2>
		<form class="layui-colla-content layui-form layui-show">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">搜索</label>
					<div class="layui-input-inline">
						<select name="search_text_type">
							<option value="nickname">会员昵称</option>
							<option value="mobile">手机</option>
							<option value="email">邮箱</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<input type="text" name="search_text" placeholder="昵称/手机号/邮箱" autocomplete="off" class="layui-input ">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">创建时间</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="start_date" id="start_date" placeholder="请输入开始时间" autocomplete="off" readonly>
					</div>
					<div class="layui-input-inline ns-split">-</div>
					<div class="layui-input-inline end-time">
						<input type="text" class="layui-input" name="end_date" id="end_date" placeholder="请输入结束时间" autocomplete="off" readonly>
					</div>
				</div>
			</div>
			<div class="ns-form-row">
				<button class="layui-btn ns-bg-color" lay-submit lay-filter="search">筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>

<!-- 会员列表 -->
<table id="member_list" lay-filter="member_list"></table>

<!-- 会员信息 -->
<script type="text/html" id="member_info">
	<div class="ns-table-title">
		<div class="member-info-wrap">
			<div class="member-face">
				<img src="{{ns.img(d.headimg)}}" alt="" onerror="this.src = 'SHOP_IMG/default_headimg.png'">
			</div>
			<div class="member-nickname">
				{{d.nickname}}
			</div>
		</div>
	</div>
</script>

<!-- 操作 -->
<script type="text/html" id="operation">
	<div class="ns-table-btn">
		<a class="layui-btn" lay-event="info">详情</a>
	</div>
</script>
{/block}

{block name="script"}
<script>
layui.use(['form', 'laydate'], function () {
	var form = layui.form,
		laydate = layui.laydate;
	form.render();

	var table = new Table({
		elem: '#member_list',
		url: ns.url("store://store/member/lists"),
		cols: [
			[
				{
					title: '会员',
					unresize: 'false',
					width: '20%',
					templet: '#member_info'
				},
				{
					title: '手机号',
					unresize: 'false',
					width: '15%',
					templet: function (data) {
						return data.mobile == '' ? '--' : data.mobile;
					}
				},
				{
					title: '邮箱',
					unresize: 'false',
					width: '20%',
					templet: function (data) {
						return data.email == '' ? '--' : data.email;
					}
				},
				{
					title: '创建时间',
					unresize: 'false',
					width: '17%',
					templet: function (data) {
						return ns.time_to_date(data.create_time);
					}
				},
				{
					title: '操作',
					toolbar: '#operation',
					unresize: 'false',
					width: '10%'
				}
			]
		],
	});

	//注册开始时间
	laydate.render({
		elem: '#start_date',
		type: 'datetime'
	});

	//注册结束时间
	laydate.render({
		elem: '#end_date',
		type: 'datetime'
	});

	/**
	 * 搜索功能
	 */
	form.on('submit(search)', function (data) {
		table.reload({
			page: {
				curr: 1
			},
			where: data.field
		});
		return false;
	});

	/**
	 * 监听工具栏操作
	 */
 	table.tool(function(obj) {
		var data = obj.data;
		switch (obj.event) {
			case 'info': //编辑
				location.href = ns.url("store://store/member/detail?member_id=" + data.member_id);
				break;
		}
	});
})
</script>
{/block}